<template>
  <div class="overview">
    <n-card :bordered="false">
      <n-grid class="statistical-card" x-gap="12" :cols="4">
        <n-gi>
          <n-card :segmented="true" size="small">
            <template #header> 代理连接</template>
            <n-number-animation
              :from="0"
              :to="httpHttpsProxyServiceOverview?.proxyConnectionNumber"
            />
          </n-card>
        </n-gi>
        <n-gi>
          <n-card :segmented="true" size="small">
            <template #header> 直接连接</template>
            <n-number-animation
              :from="0"
              :to="httpHttpsProxyServiceOverview?.directConnectionNumber"
            />
          </n-card>
        </n-gi>
        <n-gi>
          <n-card :segmented="true" size="small">
            <template #header> 代理流量</template>
            <div style="display: flex; align-items: center">
              <n-icon>
                <arrow-down theme="filled" :strokeWidth="4" />
              </n-icon>
              <n-number-animation
                :precision="2"
                :from="0"
                :to="byte4Human(httpHttpsProxyServiceOverview?.proxyTrafficIn || 0).value"
              />
              {{ byte4Human(httpHttpsProxyServiceOverview?.proxyTrafficIn || 0).unit }} /
              <n-icon>
                <arrow-up theme="filled" :strokeWidth="4" />
              </n-icon>
              <n-number-animation
                :precision="2"
                :from="0"
                :to="byte4Human(httpHttpsProxyServiceOverview?.proxyTrafficOut || 0).value"
              />
              {{ byte4Human(httpHttpsProxyServiceOverview?.proxyTrafficOut || 0).unit }}
            </div>
          </n-card>
        </n-gi>
        <n-gi>
          <n-card :segmented="true" size="small">
            <template #header> 直连流量</template>
            <div style="display: flex; align-items: center">
              <n-icon>
                <arrow-down theme="filled" :strokeWidth="4" />
              </n-icon>
              <n-number-animation
                :precision="2"
                :from="0"
                :to="byte4Human(httpHttpsProxyServiceOverview?.directTrafficIn || 0).value"
              />
              {{ byte4Human(httpHttpsProxyServiceOverview?.directTrafficIn || 0).unit }} /
              <n-icon>
                <arrow-up theme="filled" :strokeWidth="4" />
              </n-icon>
              <n-number-animation
                :precision="2"
                :from="0"
                :to="byte4Human(httpHttpsProxyServiceOverview?.directTrafficOut || 0).value"
              />
              {{ byte4Human(httpHttpsProxyServiceOverview?.directTrafficOut || 0).unit }}
            </div>
          </n-card>
        </n-gi>
      </n-grid>
    </n-card>
    <n-card :bordered="false">
      <template #header>连接详情</template>
      <n-data-table
        class="connection-info-table"
        :columns="columns"
        :data="httpHttpsProxyServiceOverview?.connectionState || []"
        :bordered="true"
        max-height="300"
        style="background-color: transparent"
      />
    </n-card>
  </div>
</template>
<script setup lang="ts">
import { type DataTableColumns, NIcon, NTag } from "naive-ui"
import { h, onMounted, ref } from "vue"
import type { FilterOptionValue } from "naive-ui/es/data-table/src/interface"
import { Delete, ArrowDown, ArrowUp } from "@icon-park/vue-next"
import { byte4Human } from "@/utils/net-util"
import {
  type HttpHttpsProxyServiceOverview,
  type ConnectionStateRow,
  doHttpHttpsProxyServiceOverview
} from "@/api/client/overview-api"
import moment from "moment"

const protocolTag = (protocol: string) => {
  const color = (p: string) => {
    if (p === "http") {
      return "#3498db"
    } else if (p === "https") {
      return "#2ecc71"
    } else {
      return "#f39c12"
    }
  }
  return h(
    NTag,
    {
      color: { color: color(protocol.toLowerCase()), textColor: "#fff" },
      size: "small",
      bordered: false,
      style: {
        marginRight: "10px"
      }
    },
    () => (protocol && protocol.trim() !== "" ? protocol.toUpperCase() : "UNKNOWN")
  )
}

function renderTarget(row: ConnectionStateRow) {
  return h("div", {}, [
    protocolTag(row.hostPort.protocol),
    row.hostPort.host + ":" + row.hostPort.port
  ])
}

const columns: DataTableColumns<ConnectionStateRow> = [
  {
    title: "目标地址",
    key: "target",
    render: renderTarget
  },
  {
    title: "连接类型",
    key: "connectionType",
    width: 150,
    render: (row: ConnectionStateRow) => {
      if (row.connectionType === "PROXY") {
        return "代理"
      } else if (row.connectionType === "DIRECT") {
        return "直连"
      } else {
        return "未知"
      }
    },
    defaultFilterOptionValues: ["PROXY", "DIRECT"],
    filterOptions: [
      {
        label: "代理",
        value: "PROXY"
      },
      {
        label: "直连",
        value: "DIRECT"
      }
    ],
    filter: (value: FilterOptionValue, row: ConnectionStateRow) => {
      return row.connectionType === value
    }
  },
  {
    title: "连接数",
    key: "connectionNum",
    width: 150,
    sorter: (row1, row2) => row1.connectionNum - row2.connectionNum
  },
  {
    title: "连接时间",
    key: "createTime",
    width: 200,
    render: (row: ConnectionStateRow) => moment(row.createTime).format("yyyy-MM-DD HH:mm:ss")
  }
]

const httpHttpsProxyServiceOverview = ref<HttpHttpsProxyServiceOverview>()

onMounted(() => {
  doHttpHttpsProxyServiceOverview().then((res) => {
    httpHttpsProxyServiceOverview.value = res.data
  })
})
</script>
<style scoped lang="scss">
.overview {
  background-color: transparent;

  :deep(.n-card) {
    background-color: transparent;
  }

  .connection-info-table {
    --n-th-color: transparent !important;
    --n-td-color: transparent !important;
    --n-td-color-hover: rgba(150, 150, 150, 0.1) !important;
    background-color: transparent;
  }
}
</style>
